import React, { Component } from 'react';
import ReactDom from 'react-dom';
import util from "@/common/util";
import layer from "@/common/layer";
import axios from 'axios';
import ReactSwiper from 'reactjs-swiper';
import jquery from 'jquery';


class Loan extends Component {
    constructor(props) {
        super(props);
        this.state = {
            loanList: ['zhangan'],
            linkUrl: [],
            kind: ['/assets/wechat/newprd.png', '/assets/wechat/fastpass.png', '/assets/wechat/recommend.png', '/assets/wechat/hot.png'],
            imgdisplay: false
        }
    }

    componentDidMount() {
        this.getlist()
        var index;
        var that = this
        jquery(".loanul").on("click", "li", function () {
            var id = jquery(this).data("id");
            index = jquery(this).index();
            jquery(this).children('a').attr('href', that.state.linkUrl[index])
        });
    }

    async getlist() {
        let res = await util.rjax({
            url: '/other/list?type=3',
            type: 'get',
        })
        this.setState({ loanList: res.data.rows });
        var arr = []
        var obj = {}
        for (let i in res.data.rows) {
            if (res.data.rows[i].kind) {
                obj = { k: Number(i), v: res.data.rows[i].kind }
                arr.push(obj)
            }
        }
        for (let i in arr) {
            jquery('.clickli').eq(arr[i].k).find('.fastpass').show().attr("src", this.state.kind[arr[i].v])
        }
    }


    render() {
        //方式1:
        let newloans = this.state.loanList.map((item, index) => {
            return (
                <li className="clickli" data-id={item.id} key={index}>
                    <a href={item.linkUrl}>
                        <img className="iconimg" src={item.image} alt="" />
                        <div className="loandel">
                            <p className="loanname">{item.title}</p>
                            <p className="advance">{item.summary}</p>
                            <p className="applynum">申请人数&nbsp;{item.count}&nbsp;人</p>
                        </div>
                        <span className="entericon"><img src="/assets/wechat/arrow.png" alt="" /></span>
                        <img className="fastpass" style={{ display: this.state.imgdisplay ? 'block' : 'none' }} alt="" />
                    </a>
                </li>
            )
        })
        return (
            <div>
                <div id="loan">
                    <ul className="loanul">
                        {newloans}
                    </ul>
                </div>
            </div>
        )
    }
}
ReactDom.render(<Loan />, document.getElementById("app"));